<template>
    <div id="echarts">
        <div ref="chart" class="zhuxingtu" />
    </div>
</template>
<script>
    function getTime(){
        let time = new Date();
        return time.toLocaleString();
    }

    export default {
        data() {
            return {
                showTime: [],
                showValue: [],
            }
        },
        created() {
            for (var i = 0; i < 10; i++) {
                this.showTime.push(getTime())
                this.showValue.push(Math.random())
            }
            this.$nextTick(() => {
                var showOption = {
                    xAxis: {
                        type: 'category',
                        data: this.showTime,
                        axixLine: {
                            show: true,
                            lineStyle: {
                                color: "#FFFFFF"
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#FFFFFF",
                                fontSize: 16
                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        axixLine: {
                            show: true,
                            lineStyle: {
                                color: "#FFFFFF",
                                wdith: 5,
                                type: "solid"
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#FFFFFF",
                                fontSize: 16
                            }
                        },
                    },
                    series: [
                        {
                            data: this.showValue,
                            type: 'line',
                            symbolSize: 10,
                            lineStyle: {
                                color: '#FFFFFF',
                                width: 4
                            }
                        }
                    ]
                }
                const dom = this.$refs.chart;
                const Echart1 = this.$echarts.init(dom);
                Echart1.setOption(showOption);
                setInterval(() => {
                    if(this.showTime.length > 10){
                        this.showTime.shift();
                        this.showValue.shift();
                    }
                    //将新值添加到数组中
                    this.showTime.push(getTime());
                    this.showValue.push(Math.random());

                    Echart1.setOption({
                        xAxis: {
                            type: 'category',
                            data: this.showTime,
                            axixLine: {
                                show: true,
                                lineStyle: {
                                    color: "#FFFFFF"
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#FFFFFF",
                                    fontSize: 16
                                }
                            },
                        },
                        yAxis: {
                            type: 'value',
                            axixLine: {
                                show: true,
                                lineStyle: {
                                    color: "#FFFFFF",
                                    wdith: 5,
                                    type: "solid"
                                }
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#FFFFFF",
                                    fontSize: 16
                                }
                            },
                        },
                        series: [
                            {
                                data: this.showValue,
                                type: 'line',
                                symbolSize: 10,
                                lineStyle: {
                                    color: '#FFFFFF',
                                    width: 4
                                }
                            }
                        ]
                    });
                }, 2000)
            });
        },
    };
</script>
<style lang="less">
.zhuxingtu {
  height: 600px;
  width: 100%;
  background: lightcoral !important;
}
</style>